<template>
  <div class="grid-container">
    <!-- 副标题 -->
    <div v-for="item in titleList" :key="item.id" >
      <div class="grid-item1">
        <el-text class="mx-1" :type="item.color" style="font-size: 0.9vw;font-weight: bold;">{{ item.contentEN }} - {{ item.contentCN }}</el-text>
        
      </div>
    </div>
    <!-- KPI -->
    <div v-for="components in contentdata" :key="components.id">
      <div class="grid-item2">
        <el-card class="kpi-container">
          <!-- 小标题 -->
          <template #header >{{ components.contenttitle }}</template>
          
          <!-- <img  :src= "components.imgaddress"  style="max-width: 100%; height: auto;"  /> -->

          <!-- KPI数据内容 -->
          <el-row :gutter="10">

            <!-- 图片 -->
            <el-col :span="24" v-if="components.type === 'img'">
              <img :src= "components.imgaddress" style="width: 370px; height: 205px;" />
            </el-col>

            <!-- 走马灯（多张图片切换）-->
            <el-col :span="24" v-if="components.type === 'carousel'">
              
              <el-carousel ref="carousel" v-model="currentIndex" :initial-index="currentIndex"  style="width: 370px; height: 206px;"   arrow="hover" :autoplay="false"  indicator-position="none" >
                <el-carousel-item v-for="item in components.carousel" :key="item.id">
                  <img :src= "item.url" style="width: 100%; height: 68%;" />
                </el-carousel-item>
              </el-carousel>
                  
            </el-col>

            <!-- 日检表数据 -->
            <el-col :span="24" v-if="components.type === 'checklist'">

                <!-- 日检表 -->
                <el-table :data="components.inspectionData" border  size="small" :cell-style="{padding:0}" :header-cell-style="{padding:0}" style="width: 369px;height: 130px; font-size: 6px;">

                  <!-- 日检表第一列-checkpoints。  prop代表inspectionData中对象的属性值名称，label代表表格抬头-->
                  <el-table-column prop="checkpoints" label="CHECKPOINTS" width="95" align="center" />

                  <!-- 日检表其他列的遍历 -->
                  <el-table-column v-for="fixedcolumn in checklisttitle" :key="fixedcolumn.id" :label="fixedcolumn.title" width="68" align="center" >

                    <!-- 日检表记录：圆圈颜色 -->
                    <template #default="{ row }">
                      <!-- <div class="circle" :style="{ backgroundColor: row[fixeditem.title] ===0 ? 'white' : (row[fixeditem.title] ===1 ? 'red' :'green')  }"></div> -->
                       <!-- row[fixedcolumn.title]恰好对应上inspectionData中对象属性值名称--morning和evening -->
                      <div class="centered-circle">
                        <div class="circle" :style="{ backgroundColor: row[fixedcolumn.title]  }"></div>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>

                <!-- top issue表-->
                <el-table :data="components.topissue" border  size="small" :cell-style="{padding:0}" :header-cell-style="{padding:0}" style="width: 369px;height: 75px; font-size: 6px;">
                  <el-table-column prop="shift" label="SHIFT" width="95" align="center" />
                  <el-table-column prop="issue" label="TOP ISSUE PER SHIFT" width="204" align="center" />
                  <el-table-column  label="ESCALATION" width="68" align="center">
                    <!-- top issue表记录：圆圈颜色 -->
                    <template #default="{ row }">
                      <!-- <div class="circle" :style="{ backgroundColor: row[fixeditem.title] ===0 ? 'white' : (row[fixeditem.title] ===1 ? 'red' :'green')  }"></div> -->
                       <!-- row.escalation 对应topissue中对象属性值名称--escalation -->
                      <div class="centered-circle">
                      
                        <div class="circle" :style="{ backgroundColor: row.escalation  }"></div>

                      </div>
                    </template>
                  </el-table-column>
                </el-table>

            </el-col>
            
            <!-- 安全金字塔图表（chart）数据 -->
            <el-col :span="12" v-if="components.pyramidtableData" ><Echart :options="pyramidOptions" :width="150" :height="210" /></el-col>
            <el-col :span="12" v-if="components.pyramidtableData" >
              <el-table :data="components.pyramidtableData" border height="170" :cell-style="{padding:0}" :header-cell-style="{background:'#FFFFFF',padding:0}"  style="margin-top: 17%; width: 100%;font-size: 10px;" size="small" >
                <el-table-column label="Incidents" align="center">
                  <el-table-column prop="month" label="Month" width="75" align="center" />
                  <el-table-column prop="YTD" label="YTD" width="75" align="center" />
                </el-table-column>
              </el-table>
            </el-col>

            <!-- 其他图表（chart）数据 -->
            <!-- <el-col :span="24" v-if="components.type === 'charts' && components.pyramidtableData === undefined "><Echart :options="components.echartoptions" :width="360" :height="210" /></el-col> -->
            <el-col :span="24" v-if="components.type === 'charts' && components.pyramidtableData === undefined ">
              
              <component :is="Echart" :options="components.echartoptions"  :width="360" :height="210" />
              <!-- <component :is="Echart" :options="components.echartoptions" :theme="echarttheme" :width="360" :height="210" /> -->
            </el-col>
          </el-row>
        </el-card>

      </div>
    </div>
  </div>

</template>

<script setup lang="ts">

import {dayData,ShiftData,WeekData,BarLineChart,DailyShiftChart,pyramidOptions} from '@/views/dppBoard/factoryPerformance/echarts-data'
import {Echart} from '@/components/Echart/index'
import {ContentData,InfraWorkcenterApi} from '@/api/manu/ci/index';


//import { color } from 'echarts';
defineOptions({ name: 'Home' })

//console.log(InfraWorkcenterApi.trialGetData()[9]);
//console.log(TargetData(96),dayData);

const echarttheme = {
  // color: ['#f4e925', '#0a2a2a'],
  legend:{
    
    itemHeight:6,
    itemWidth:6,
    //width:20,
    textStyle:{
      fontSize:5,
    },
    top: 'middle', // 图例的位置
    right: 'right' // 图例的位置
  }
}

//副标题数据类 
interface titleVO {
  id: number // id
  contentCN: string // 中文表述
  contentEN:string // 英文表述
  color: string // 字体颜色
}

//副标题数据
const titleList:titleVO[] =[
  {
    id: 1,
    contentCN: '安全',
    contentEN:'Safety',
    color:'danger',
  },
  {
    id: 2,
    contentCN: '质量',
    contentEN:'Quality',
    color:'success',
  },
  {
    id: 3,
    contentCN: '交付',
    contentEN:'Delivery',
    color:'warning',
  },
  {
    id: 4,
    contentCN: '成本',
    contentEN:'Cost',
    color:'primary',
  },
  {
    id: 5,
    contentCN: '每周状态',
    contentEN:'Weekly Status',
    color:'',
  },
]

//走马灯-轮播

const carousel = ref()
const currentIndex = ref(0)
 
// 轮播图自动切换，赋值为自定义指示器
// const changeHandle = (e) => {
//   currentIndex.value = e
// }
// 通过自定义指示器切换，赋值给轮播图
// const changeIndicator = (index) => {
//   // carousel.value.setActiveItem(index)
//   // currentIndex.value = index

//   console.log(currentIndex)
// }


// //KPI数据类
// interface ContentData {
//   id: number             // id
//   type:string            // 类型：charts |  img  |  checklist(日检表)  |  “ ” （空）
//   contenttitle: string   // 小标题
//   echartData?:object        // 后台传输的图表数据
//   echartoptions?:object     // options - echart图表  ? 后缀来声明一个属性为可选的,实例化可以不赋值
//   pyramidtableData?: any[] // 安全金字塔表格data    
//   inspectionData?:any[]    // 日检表数据
//   imgaddress?:string     // 图片路径
// }

//生成效率图表--图例(数组加入“”，参见echart-data,BarLineChart函数的Series数组结构)【统计总和，不分BV&HM】
// const ProductivityLegend = ['Actual','','Target','']

//普通图表--图例（针对绩效看板第一行图表-BV&HM）
// const GeneralLegend = ['Actual(BV)','Actual(HM)','Target(BV)','Target(HM)']

//潜在风险&虚惊事件图表(数组加入“”，参见echart-data,DailyShiftChart函数的Series数组结构)【统计总和，不分BV&HM】
const SafetyRiskLegend = ['Near Miss','','Pot.Hazards','']

//报废率图表(数组加入“”，参见echart-data,DailyShiftChart函数的Series数组结构)
// const ScrapLegend = ['Scrap(BV)','Scrap(HM)','','']
//人员安排图表(统计总和，不分BV&HM)
const PersonnelArrangementLegend = ['Actual FTE','Overtime','Target FTE','Absent']
//库存图表(统计总和，不分BV&HM)
// const InventoryLegend = ['Inventory MTD','','Inventory target','']

//日检表变换颜色
const TurnColor = (checkdata:any)=>{

  if(checkdata === 1){
    checkdata = 'red'
  }else if(checkdata === 2){
    checkdata = 'green'
  }else if(checkdata === 3){
    checkdata = 'white'
  }

  return checkdata
}

//KPI数据处理
const contentdata:ContentData[] = InfraWorkcenterApi.trialGetData().map((item1:any):any =>{

  if(item1.id === 2 || item1.id === 3){
    item1.echartoptions = BarLineChart(dayData,item1,95,100);
    //console.log(item1.echartData)
  }else if(item1.id === 4){
    item1.echartoptions = BarLineChart(dayData,item1,0,15);
  }else if(item1.id === 6){
    item1.echartoptions = DailyShiftChart(ShiftData,WeekData,item1,0,5,SafetyRiskLegend);
  }else if(item1.id === 7){
    item1.echartoptions = DailyShiftChart(ShiftData,WeekData,item1,0,25);
  }else if(item1.id === 8){
    item1.echartoptions = DailyShiftChart(ShiftData,WeekData,item1,600,1600);
  }else if(item1.id === 9){
    item1.echartoptions = DailyShiftChart(ShiftData,WeekData,item1,0,50,PersonnelArrangementLegend);
  }else if(item1.id === 11 || item1.id === 12 || item1.id === 13 || item1.id === 14){
    for(let i = 0;i < 4; i++){
      item1.inspectionData[i].MORNING1 = TurnColor(item1.inspectionData[i].MORNING1);
      item1.inspectionData[i].MORNING2 = TurnColor(item1.inspectionData[i].MORNING2);
      item1.inspectionData[i].EVENING1 = TurnColor(item1.inspectionData[i].EVENING1);
      item1.inspectionData[i].EVENING2 = TurnColor(item1.inspectionData[i].EVENING2);
    };
    for(let j = 0;j < 2; j++){
      item1.topissue[j].escalation = TurnColor(item1.topissue[j].escalation)
    };

  }else if(item1.id === 18){
    item1.echartoptions = BarLineChart(item1.echartData.week,item1,300000,1800000);
  }

  return item1;

})

//console.log(contentdata[1].pyramidtableData);

//日检表表头数据类
interface CheckListTitle{
  id:number
  title:string
  //judge:any
}

//日检表表头数据
const checklisttitle:CheckListTitle[] = [
  
  {
    id:1,
    title:'MORNING1',
    //judge:'ismorning1Ok'

  },
  {
    id:2,
    title:'MORNING2',
    //judge:'ismorning2Ok'
  },
  {
    id:3,
    title:'EVENING1',
   // judge:'isevening1Ok'
  },
  {
    id:4,
    title:'EVENING2',
    //judge:'isevening2Ok'
  },

]



</script>


<style lang="scss" scoped>
.grid-container {
  
  display: grid;
  /* 创建五行五列的网格布局 */
  grid-template-rows: 1fr repeat(4, 7fr);
  grid-template-columns: repeat(5, 1fr);
  /* 使网格容器充满其父容器 */
  width: 100%;
  height: 100%;
  /* 确保网格项可以按比例填充空间 */
  grid-auto-flow: row;
  /* 如果需要，添加一些间距 */
  //gap: 2px; /* 网格项之间的间隙 */
  //grid-row-gap:2px;
  //grid-column-gap: 2px;
  overflow: auto;
  
}

//第一行css
.grid-item1 {
  //background: #000;
  /* 网格项至少100px，最大可以充满其网格轨道 */
  height: 100%;
  //background-color: #ccc; /* 网格项的颜色，仅为示例 */
  /* 使网格项充满其网格轨道 */
  box-sizing: border-box;
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  //border: 1px solid black;
  position: relative; /* 为添加伪元素线条做准备 */
  
}

//后4行css
.grid-item2 {
  //background: #000;
  /* 网格项至少100px，最大可以充满其网格轨道 */
  height: 100%;
  //background-color: #ccc; /* 网格项的颜色，仅为示例 */
  /* 使网格项充满其网格轨道 */
  box-sizing: border-box;
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  // display: flex; /* 使用 Flexbox 布局 */
  // flex-direction: column; /* 确保是垂直方向 */
  // align-items: stretch; /* 默认值，子元素伸展填充容器宽度 */
  // justify-content: space-between; /* 子元素在容器中垂直分散 */
  //border: 1px solid black;
  //position: relative; /* 为添加伪元素线条做准备 */
}

/* 为第一行的每个 .grid-item 添加竖线，除了最后一个 */
//.grid-container > .grid-item:nth-child(-n+4):not(:last-child)::after {
  //content: '';
 // position: absolute;
  //top: 0;
  //bottom: 0;
 // right: 0;
  //width: 1px; /* 线条宽度 */
 // background-color: black; /* 线条颜色 */
//}

.grid-item::after {
  content: '';
  //display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.grid-item > * {
  //display: inline-block;
  vertical-align: middle;
}

.kpi-container{
  padding: 0;
  margin: 0;
  width: 98.5%;
  height: 97.5%;
}

// .kpi-title{
//   border: none;
//   background: #1e9187;
//   box-sizing: border-box;
//   width: 100%;
//   height: 100%;
//   margin: 0;
// }

.el-card :deep(.el-card__header) {
  background-color: #FF0000;
  padding: 0.3vw;
  border: none;
  color: white;
  font-size: 0.7vw;
  //font-weight: bold;
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.el-card :deep(.el-card__body) {
  background-color: #CFD5EA;
  padding: 3px;
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.centered-circle {
     display: flex;
     align-items: center;
     justify-content: center;
   }

.circle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  //margin-right: 8px;
}

// .el-table_row .el-table_cell{
//   line-height: 50px;
// }
// .el-table.cell {
//   line-height: 20px;
// }

.el-col{
  padding: 0;
}

.el-carousel__item img {
  display: flex;
  margin: 0;
}

.carousel-container {
  position: relative;
  
}
 
.custom-indicator {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  
  background: #0a8669;
}
.custom-indicator div {
  width: 10px;
  height: 20px;
  border-radius: 50%;
  background-color: #ccc;
  margin: 0 5px;
  cursor: pointer;
  
}





  // .subtitle-row{
  //   width: 100%;
  //   height: 3.5%;
  // }
  
  // .subtitle{
  //   //float: left;
  //   //width: 19.9%;
    
  //   font-size: 0.9vw;
  //   font-weight: bold;
  //   display: flex;
  //   align-items: center;      //垂直居中
  //   justify-content: center;  //水平居中
  //   border-right: 0.125vw solid #000000;
  // }

  


</style>